<template>
  <div class="table-style">
      <div class="filter-container">
       商品标题：<el-input  placeholder="商品标题" v-model="listQuery.Name" clearable style="width: 200px;margin:0 10px 0 0" class="filter-item" />
       门店：<div class="branch-style" @click="handleSeleMd">{{Code != "" ? Code : "全部" }}</div>
       <!-- 门店：<el-input  placeholder="请选择门店" v-model="listQuery.Name" clearable style="width: 200px;margin:0 10px 0 0" class="filter-item" /> -->
       商品类型： <el-select v-model="listQuery.Condition" placeholder="类型选择"  style="width: 120px;margin:0 10px 0 0">
                  <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
               </el-select>
      <el-select placeholder="品牌选择" v-model="listQuery.Brandid" clearable style="width: 120px;margin:0 10px 0 0" class="filter-item">
        <el-option  v-for="item in Brandlist" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option>
      </el-select>
      <el-button style="margin-bottom:0" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>
     <el-table :data="goodsList" stripe  fit v-loading:loading  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" border style="width: 100%"  v-loading="listLoading">
        <el-table-column width="60"  type="index" label="序号" > </el-table-column>
        <el-table-column width="180" prop="Img"  label="商品主图"  >
          <template slot-scope="scope">
            <img class="img-style" :src="scope.row.Img" min-width="100" height="100"  @click="handleProductImg(scope.row)"/>
         </template>
        </el-table-column>
        <el-table-column width="80" prop="Brand.Name" label="商品品牌"> </el-table-column>
        <el-table-column width="160"  prop="Goods.Title" label="名称">  </el-table-column>
         <el-table-column width="160"  prop="Goods.Mdid" label="门店">
          <template slot-scope="scope">
            <div v-for=" list in mdList" :key="list.Id">
               <div v-if="scope.row.Goods.Mdid === list.Id">{{list.MdName?list.MdName:list.Code }}</div>
            </div>             
           </template>
          </el-table-column>
          <el-table-column width="120" prop="Goods.Price0||Goods.Price1" label="价格区间">
            <template slot-scope="scope">
              <div v-if="scope.row.Goods.Price0=== scope.row.Goods.Price1">{{scope.row.Goods.Price1}}</div>
              <div v-else> {{scope.row.Goods.Price0}} ~ {{scope.row.Goods.Price1}} </div>
            </template>               
          </el-table-column>
        <el-table-column width="80"  prop="Goods.Sort" label="排序">  </el-table-column>
         <el-table-column width="80"  prop="Goods.Viewcount" label="浏览量">  </el-table-column>
        <el-table-column  prop="Goods.Material" label="材质描述">  </el-table-column>
        <el-table-column  label="设置"  align="center"
        class-name="small-padding fixed-width"
        style="display:flex:flex-wrap:wrap; ">
          <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click="handleEdit(scope.row)" style="margin:0 10px 10px 0">查看商品</el-button>
          <el-button size="mini"  type="primary" @click="handleSpecEdit(scope.row)" style="margin:0 10px 10px 0">规格详情</el-button>
          </template>  
        </el-table-column>
      </el-table>
      <!-- 分页 -->
     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="GetGoodsList" />
      <!-- 门店选择弹出层 -->
      <el-dialog title="门店选择" :visible.sync="dialogFormVisible" width="60%" >
        <div class="branch-warp">
          <div class="branch-item" :class="Code === '' ? 'branch-active' : ''"  @click="setNullMdtype"> 全部 </div>
          <div class="branch-item" :class="mdIndex === index && Code != ''? 'branch-active' : ''" v-for="(item, index) in mdList" :key="item.Id" @click="selectMd(index, item)" >
            {{ item.MdName?item.MdName:item.Code }}
          </div>
        </div>
     </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { GoodsList, GoodsInfo, GoodsKeys} from "@/api/mdlist";
export default {
  components: { Pagination },
  data() {
    return {
      goodsList: [],
      mdList:[],//门店列表
      mdIndex:0,//门店下标
      listLoading: true,
      dialogFormVisible:false,
      Brandlist:[],
      Code:"",//门店code
      total: 0,
      options:[{
          value: '',
          label: '全部'
        },{
          value: 'cbd',
          label: '总部'
        }, {
          value: 'self',
          label: '自己'
        }],
       listQuery: {
        page: 1,
        limit: 20,
        Mdid: undefined,
        Brandid: undefined,
        Condition:""
      },
    };
  },
  created() {
    this.GetGoodsList();
  },
  methods: {
    GetGoodsList() {
       this.listLoading = true
      GoodsList(this.listQuery).then((res) => {
        if (res.msg == "success") {
          this.goodsList = res.data.Goods;
          this.Brandlist = res.data.Brand
          this.mdList = res.data.mds
          for (let i = 0; i <  this.goodsList.length; i++) {
            if (this.goodsList[i].Imgs.length > 0) {
              this.goodsList[i].Img = 'http://f9.cbd88.com/'+this.goodsList[i].Imgs[0].Img
            }else {
              this.goodsList[i].Img = 'addImg.png'
            }
            
          }
          this.total = res.data.total
           this.listLoading = false
        }
      });
    },
   
    
    //查看详情
    handleEdit(row) {
        this.$router.push({ name: "cbd-goodsdetail", query: { goodsid: row.Goods.Id,mdid:row.Goods.Mdid} });
    },

    //产品规格
    handleSpecEdit(row) {
      this.$router.push({ name: "cbd-goodsSpec", query: {goodsid: row.Goods.Id,mdid:row.Goods.Mdid} });
    },
    
    //商品图片
    handleProductImg(row){
      this.$router.push({ name: "cbd-goodsImages", query: { goodsid: row.Goods.Id,mdid:row.Goods.Mdid} });
    },
    
    //搜索商品
    handleFilter(){
       this.listQuery.page = 1
       this.GetGoodsList();
    },
    
    //选择门店
    handleSeleMd(){
      this.dialogFormVisible = true
    },

      //选择部门
    selectMd(index, item) {
      this.mdIndex = index;
      this.Code = item.Code;
      this.listQuery.Mdid = item.Id
      console.log("aabb:",item.Id)
    },
    setNullMdtype(){
      this.Code = ''
      this.listQuery.Mdid = ''
    }
  },
  
};
</script>

<style>
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.table-style {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.img-style {
  cursor: pointer;
}
.branch-style {
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  margin:0  10px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  color: #606266;

}
.branch-warp {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.branch-item {
  width: 135px;
  height: 36px;
  margin: 0 10px 10px 0;
  line-height: 36px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 12px;
  color: #000;
  cursor: pointer;
}
.branch-active {
  background-color: #e6a23c;
  color: #fff;
}
</style>